import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp/util/SpUtil.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'BottomNavigationWiget.dart';


class LoginWidget extends StatefulWidget{
  _LoginWidgetState createState() => _LoginWidgetState();
}
class _LoginWidgetState extends State<LoginWidget>{

  TextEditingController accountEditingController;
  TextEditingController passwordEditingController;
  bool isShowPwd;
  bool isShowClear;

  @override
  void initState() {
    isShowPwd = false;
    isShowClear = false;
    accountEditingController = new TextEditingController();
    accountEditingController.addListener(() {
      if(accountEditingController.text!=''){
        setState(() {
          isShowClear = true;
        });
      }else{
        setState(() {
          isShowClear = false;
        });
      }
    });
    passwordEditingController = new TextEditingController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: (){
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Container(
          child: Column(
            children: <Widget>[
              Container(
                width: 100,
                margin: EdgeInsets.only(top: 100,bottom: 20),
                child: Image.asset('assets/images/logo.png'),
              ),
              Container(
                child: Container(
                  height: 50,
                  width: 300,
                  decoration: BoxDecoration(
                      color: Color(0xFFF2F3F5),
                      borderRadius: BorderRadius.all(Radius.circular(30))
                  ),
                  child: Row(
                    children: <Widget>[
                      Container(
                        margin:EdgeInsets.only(top: 5,left: 5,bottom: 5),
                        child: ClipOval(
                          child: AnimatedCrossFade(
                            sizeCurve: ElasticOutCurve(),
                            firstCurve: Curves.ease,
                            secondCurve: Curves.ease,
                            duration: Duration(milliseconds: 300),
                            firstChild: Image.asset('assets/images/avatar.png'),
                            secondChild: SizedBox(width: 40,height: 40,),
                            crossFadeState: accountEditingController.value.text=='admin'?
                            CrossFadeState.showFirst:CrossFadeState.showSecond
                          ),
                        ),
                      ),
                      Container(
                        width: 200,
                        margin: EdgeInsets.only(bottom: 5,left: 5,),
                        child: TextField(
                          cursorColor: Color(0xFFBBBBBB),
                          cursorWidth: 1,
                          controller: accountEditingController,
                          maxLines: 1,
                          decoration: InputDecoration(
                            hintText: '请输入账号',
                            hintStyle: TextStyle(color: Color(0xFFbbbbbb)),
                            border: InputBorder.none,
                          ),
                        ),
                      ),
                      Spacer(),
                      InkWell(
                        onTap: (){
                          accountEditingController.clear();
                        },
                        child:isShowClear?Icon(Icons.clear,size: 15,color: Color(0xFFcccccc),):SizedBox(),
                      ),
                      Spacer(),
                    ],
                  ),
                ),
              ),
              Container(
                child: Container(
                  height: 50,
                  width: 300,
                  margin: EdgeInsets.only(top: 20),
                  decoration: BoxDecoration(
                      color: Color(0xFFF2F3F5),
                      borderRadius: BorderRadius.all(Radius.circular(30))
                  ),
                  child: Row(
                    children: <Widget>[
                      Container(
                        width: 200,
                        margin: EdgeInsets.only(bottom: 5,left: 50),
                        child: TextField(
                          cursorColor: Color(0xFFBBBBBB),
                          cursorWidth: 1,
                          controller: passwordEditingController,
                          maxLines: 1,
                          decoration: InputDecoration(
                            hintText: '请输入密码',
                            hintStyle: TextStyle(color: Color(0xFFbbbbbb)),
                            border: InputBorder.none,
                          ),
                          obscureText: !isShowPwd,
                        ),
                      ),
                      Spacer(),
                      InkWell(
                        onTap: (){
                          setState(() {
                            isShowPwd = !isShowPwd;
                          });
                        },
                        child:isShowPwd?Icon(Icons.visibility,size: 15,color: Color(0xFFcccccc),):Icon(Icons.visibility_off,size: 15,color: Color(0xFFcccccc),),
                      ),
                      Spacer(),
                    ],
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 20),
                alignment: Alignment.center,
                child: InkWell(
                  highlightColor: Colors.transparent,
                  hoverColor: Colors.transparent,
                  splashColor: Colors.transparent,
                  onTap: (){
                    if(accountEditingController.value.text == "admin"
                        &&passwordEditingController.value.text == "123456"){
                      SpUtil.sharedPreferences.setBool("isLogin", true);
                      Navigator.pushAndRemoveUntil(context,
                          new MaterialPageRoute(builder: (context) => new BottomNavigationWidget()),
                              (route) => false);
                    }else{
                      showDialog(
                        context: context,
                        child: AlertDialog(
                          shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                          title: Text('提示'),
                          content: SingleChildScrollView(
                            child: ListBody(
                              children: <Widget>[
                                Text('用户或密码不正确'),
                              ],
                            ),
                          ),
                          actions: <Widget>[
                            FlatButton(
                              child: Text('确定',style: TextStyle(color: Color(0xFFF16050)),),
                              onPressed: () {
                                Navigator.pop(context);
                              },
                            ),
                          ],
                        )
                      );
                    }
                  },
                  child: ClipOval(
                    child: Container(
                      height: 50,
                      width: 50,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [
                            Color(0xFFF16050),
                            Color(0xFFffdd00),
                          ],
                        ),
                      ),
                      child: Icon(Icons.arrow_forward,color: Colors.white),
                    ),
                  ),
                ),
              ),
              Spacer(),
              Container(
                margin: EdgeInsets.only(bottom: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('注册账号 ',style: TextStyle(color: Color(0xFFFB6659)),),
                    Text('|',style: TextStyle(color: Color(0xFFFED102)),),
                    Text(' 忘记密码',style: TextStyle(color: Color(0xFFFB6659)),)
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

}